import React, { useEffect, useState } from 'react'
import Header from '../../components/Header'
import { reqCate, reqCateGoods } from '../../http/api'
import CateShow from './CateShow/CateShow'
import { SearchBar } from 'antd-mobile'
import './Cate.less'
export default function Cate(props) {
    // 1.1 初始化cate数据
    const [cate, setCate] = useState([])
    // 2.1 初始化分类商品的数据
    const [cateGoods, setCateGoods] = useState([])
    // 3.1 初始化n
    const [n, setN] = useState(0)

    useEffect(() => {
        // 1.2.一进页面就发请求
        reqCate().then(res => {
            if (res.data.code === 200) {
                //1.3 修改赋值
                setCate(res.data.list ? res.data.list : [])
            }
        })
        changeRequest()
        setN(n)
       

    }, [])
     //点击左侧发右侧的请求
    function changeRequest(id,index){
        reqCateGoods({fid:id}).then(res=>{
            if(res.data.code===200){
                //修改赋值
                setCateGoods(res.data.list?res.data.list:[])
            }
        })
        setN(index)
    }
    return (

        <div>
            <Header title="商品分类" back></Header>
            <div className="nav_search">
                <SearchBar placeholder="搜索" maxLength={8} />
            </div>
            {/* CateShow */}
            {/* 1.4 传给子组件 */}
            <CateShow {...props} leftlist={cate} n={n} changeRequest={(id,index)=>changeRequest(id,index)} goodslist={cateGoods}></CateShow>
        </div>
    )
}
